<template>
  <div class="layout">
    <aside class="sidebar">
      <!-- 用户信息区域 -->
      <div class="user-info">
        <img :src="userAvatar" alt="用户头像" class="avatar" />
        <p class="username">{{ username }}</p>
        <p class="login-time">{{ loginTime }}</p>
      </div>

      <hr class="divider">

      <!-- 侧边栏导航 -->
      <ul class="nav-links">
        <li><router-link to="/student/studentset" exact>个人设置</router-link></li>
        <li><router-link to="/student/class" exact>教学课堂</router-link></li>
        <li><router-link to="/student/PPT" exact>收藏课件</router-link></li>
        <li><router-link to="/student/word" exact>收藏文档</router-link></li>
        <li><router-link to="/student/videos" exact>收藏视频</router-link></li>
        <li><router-link to="/student/practice" exact>收藏图片</router-link></li>
        <li><router-link to="/student/questionbank" exact>星标题目</router-link></li>
        
      </ul>
    </aside>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 这里可以添加主要内容 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentSidebar',
  props: {
    username: {
      type: String,
      default: '学生'
    },
    userAvatar: {
      type: String,
      default: 'https://via.placeholder.com/80' // 更新默认头像尺寸以匹配
    },
    loginTime: {
      type: String,
      default: new Date().toLocaleString() // 默认当前时间
    }
  }
};
</script>

<style scoped>
/* 布局设置 */
.layout {
  display: flex;
  background-color: #F8F9FA;
  height: 100vh; /* 确保侧边栏占满整个视口高度 */
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px 0; /* 上下内边距 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 用户信息区域 */
.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px; /* 与 TeacherSidebar.vue 保持一致 */
}

.username {
  color: rgba(51, 51, 51, 0.926);
  font-weight: bold;
  font-size: 15px;
  margin: 5px 0;
}

.login-time {
  color: rgba(51, 51, 51, 0.926);
  font-size: 12px;
  margin: 5px 0;
}

/* 分割线样式 */
.divider {
  border: 1px solid #E4E4E4;
  width: 60%;
  margin: 10% 10% 5% 20%;
}

/* 导航链接样式 */
.nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.nav-links li {
  width: 100%;
}

.nav-links a {
  text-decoration: none;
  color: rgba(51, 51, 51, 0.926);
  font-weight: 500;
  display: block;
  padding: 12px 20px; /* 增加垂直内边距 */
  padding-left: 20%;
  transition: background-color 0.3s;
  font-size: 14px;
}

.nav-links a:hover {
  background-color: #f0f0f0;
}

.nav-links a.router-link-active {
  color: #244382;
  border-left: 3px solid #2E508F;
  margin-left: -3px;
  font-weight: bold;
}

/* 主要内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
}
</style>
